<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#myCan {
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="400px" height="400px"></canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			// 将坐标原点放到画布中心
			// ctx.translate(200,200);
			// ctx.rotate(-18*Math.PI/180);
			// ctx.beginPath();
			// ctx.moveTo(200,0);
			// ctx.lineTo(200*Math.cos(72*2*Math.PI/180),-200*Math.sin(72*2*Math.PI/180));
			// ctx.lineTo(200*Math.cos(72*4*Math.PI/180),-200*Math.sin(72*4*Math.PI/180));
			// ctx.lineTo(200*Math.cos(72*6*Math.PI/180),-200*Math.sin(72*6*Math.PI/180));
			// ctx.lineTo(200*Math.cos(72*8*Math.PI/180),-200*Math.sin(72*8*Math.PI/180));
			// ctx.closePath();
			// ctx.stroke();
			// ctx.save();
			ctx.beginPath()
			ctx.moveTo(100,200);
			ctx.lineTo(400,200);
			ctx.lineTo(150,400);
			ctx.lineTo(250,100);
			ctx.lineTo(350,400);
			ctx.closePath();
			ctx.stroke();
			ctx.restore();
		</script>
	</body>
</html>
